<template>
  <div id="macos-desktop">
    <transition name="fade-screen" mode="out-in">
      <LockScreen v-if="desktopStore.isLocked" />
      <Desktop v-else />
    </transition>
  </div>
</template>

<script setup lang="ts">
import Desktop from './components/layout/Desktop.vue'
import LockScreen from './components/layout/LockScreen.vue'
import { useDesktopStore } from './stores/desktop'

const desktopStore = useDesktopStore()
</script>

<style scoped>
#macos-desktop {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
}

/* 锁屏和桌面切换动画 */
.fade-screen-enter-active,
.fade-screen-leave-active {
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.fade-screen-enter-from {
  opacity: 0;
  transform: scale(1.05);
}

.fade-screen-leave-to {
  opacity: 0;
  transform: scale(0.95);
}
</style>

